<template>
  <div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">拍品标题</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请填写拍品标题" required="required" v-model="proInfo.name"/>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd miaoshu"><label class="weui-label">拍品描述</label></div>
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="请填写描述内容" rows="5" required="required" v-model="proInfo.presentation"></textarea>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">拍品图片 ({{imgList.length}}/9)</p>
            </div>

            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <!--<li class="weui-uploader__file" v-for="(img,index) in imgList" :key="index" :style="'backgroundImage:url('+resUrl+img.url+')'">-->
                  <!--<span @click="removeImg(index)"><img src="../../../../static/images/publish/x.png" alt=""></span>-->
                <!--</li>-->
                <li class="weui-uploader__file" v-for="(img,index) in imgList" :key="index" :style="'backgroundImage:url('+resUrl+img.smImageUrl+')'">
                  <span @click="removeImg(index)"><img src="../../../../static/images/publish/x.png" alt=""></span>
                </li>
              </ul>

              <div class="uploader__input-box" v-if="!isAndroid&&imgList.length<9">
                <img src="../../../../static/images/publish/publish-pro.png" alt="">
                <input name="files" class="weui-uploader__input" type="file" accept="image/*,video/*" multiple @change="upFile($event)"/>
              </div>
              <div class="uploader__input-box" v-if="isAndroid&&imgList.length<9" @click="showAction">
                <img src="../../../../static/images/publish/publish-pro.png" alt="">
              </div>
            </div>

          </div>
        </div>
      </div>
      <div id="actionSheet_wrap" :class="{actionsheetToggle:isAction}">
        <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
        <div class="weui-actionsheet" id="weui-actionsheet">
          <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell">
              <p>拍照</p>
              <input class="weui-uploader__input" name="files" type="file" accept="image/*" capture="camera" @change="upFile($event)" @touchend="cancel"/>
            </div>
            <div class="weui-actionsheet__cell">
              <p>摄像</p>
              <input class="weui-uploader__input" name="files" type="file" accept="video/*" capture="camcorder" @change="upFile($event)" @touchend="cancel"/>
            </div>
            <div class="weui-actionsheet__cell">
              <p>从手机相册选择</p>
              <input class="weui-uploader__input" name="files" type="file" accept="image/*,video/*" @change="upFile($event)" @touchend="cancel"/>
            </div>
          </div>
          <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" @click="cancel">取消</div>
          </div>
        </div>
      </div>

      <div class="splitBlock"></div>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <ul class="publish-lot-nav">
            <li :class="{active:isPriceIndex==1}" @click="togglePrice(1)">一口价</li>
            <li :class="{active:isPriceIndex==2}" @click="togglePrice(2)">竞价</li>
          </ul>
        </div>
      </div>

      <!--一口价框-->
      <div class="fixed-price-box" v-if="showPrice">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">价格 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写出售价格" required="required" v-model="proInfo.fixedPrice"/>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">运费 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写邮寄费用/不填写即免邮" v-model="proInfo.postage"/>
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-cells_checkbox">
              <label class="weui-check__label" for="s11" @click.prevent="check(0)">
                <div class="weui-cell__hd">
                  <input type="radio" class="weui-check" name="checkbox1" id="s11" :checked="isCheckedIndex==0" value="0">
                  <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                  <p>无时间限制</p>
                </div>
              </label>
              <label class="weui-check__label" for="s12" @click.prevent="check(1)">
                <div class="weui-cell__hd">
                  <input type="radio" name="checkbox1" class="weui-check" id="s12" :checked="isCheckedIndex==1" value="1">
                  <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                  <p>有时间限制</p>
                </div>
              </label>
            </div>
          </div>
        </div>


        <!--有时间限制-->
        <div class="weui-cell" v-if="showTime">
          <div class="weui-cell__hd"><label class="weui-label">开拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" value="" placeholder="请选择开拍时间" required="required" v-model="proInfo.startTime"/>
          </div>
        </div>

        <div class="weui-cell" v-if="showTime">
          <div class="weui-cell__hd"><label class="weui-label">结拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" value="" placeholder="请选择结拍时间" required="required" v-model="proInfo.endTime"/>
          </div>
        </div>

        <!--无时间限制-->
        <div class="weui-cell" v-if="!showTime">
          <div class="weui-cell__hd"><label class="weui-label">开拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled="disabled" placeholder="立即开拍"/>
          </div>
        </div>

        <div class="weui-cell" v-if="!showTime">
          <div class="weui-cell__hd"><label class="weui-label">结拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled="disabled" placeholder="无限制"/>
          </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
          <div class="weui-cell__hd">
            <label class="weui-label">朝代分类</label>
          </div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" v-model="proInfo.dynastyId" :class="{'select-one':proInfo.dynastyId==0}">
              <option value="0">请选择朝代分类</option>
              <option v-for="(v,k) in dynastyList" :key="k" :value="v.id">{{v.name}}</option>
            </select>
          </div>
        </div>

      </div>

      <!--竞价框-->
      <div class="bid-price-box" v-if="!showPrice">

        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">起拍价 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写起拍价格" required="required" v-model="proInfo.startingPrice"/>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">加价幅度 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写加价幅度" required="required" v-model="proInfo.bidIncrements"/>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">保障底价 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写保障底价" required="required" v-model="proInfo.minimumPrice"/>
          </div>
        </div>
        <div class="explain">
          <img src="../../../../static/images/shiming/warn.png" alt="">
          <p>每1分钟，系统会使用你的ID匿名竞价，直至等于或大于保障底价</p>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">一口价 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写一口价(不填写则无一口价)" v-model="proInfo.fixedPrice"/>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">运费 (￥)</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写邮寄费用/不填写即免邮" v-model="proInfo.postage"/>
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">开拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" value="" placeholder="" required="required" v-model="proInfo.startTime"/>
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">结拍时间</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" value="" placeholder="" required="required" v-model="proInfo.endTime"/>
          </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
          <div class="weui-cell__hd">
            <label class="weui-label">朝代分类</label>
          </div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" v-model="proInfo.dynastyId" :class="{'select-one':proInfo.dynastyId==0}">
              <option value="0">请选择朝代分类</option>
              <option v-for="(v,k) in dynastyList" :key="k" :value="v.id">{{v.name}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <button class="weui-btn weui-btn_warn" type="button" @click="publishClick">确认发布</button>
      </div>
    </div>


  </div>
</template>

<script>
  import Moment from 'moment';
  import {getStatusMapByKey,getUser,isAndroid} from '../../../assets/js/tools.js';
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getALLDynastyList,publishProduct,uploadImage,uploadMedia} from '../../../assets/js/getData';
  export default {
    name: "publishLot",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        isPriceIndex:1,
        showPrice:true,
        isCheckedIndex:1,
        showTime:true,//有无时间限制
        imgList:[],//上传之后显示的图片列表
        proInfo:{
          type:1,//'类型：1一口价、2竞拍、3一口价与竞拍、4 藏品'
          name:'',//名称
          presentation:'',//产品介绍
          smImageUrl:'',//小图片（方图）url
          mxImageUrl:'',//大图片（长图）url

          fixedPrice:'',//一口价
          postage:'',//运费
          startingPrice:'',//起拍价
          bidIncrements:'',//加价幅度
          minimumPrice:'',//保障底价

          startTime:'',//起拍时间
          endTime:'',//结束时间
          dynastyId:0,//朝代id

          categoryId:'32d35620-757d-418f-953b-ada9b24ccd4a',//商品分类id
          assortCount:1,//数量
          unit:'件',//单位
          cashDeposit:'0.00',//保证金

          proMediaList:[],//
        },
        dynastyList:[],//朝代列表

        user:null,
        userId:'',
        urlType:'',

        isAction:false,
        isAndroid:null,
      }
    },
    created(){
      this.isAndroid = isAndroid();
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['productImages'].val;

      this.user = getUser();

      this.userId = this.user.id;

      //获取所有朝代分类
      getALLDynastyList().then(res => {
        if(res.data.reqResult.code>0){
          this.dynastyList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      })
    },
    methods:{
      //发布拍品
      publishClick(){
        if(!this.proInfo.name){
          Toast('请填写拍品名称');
          return;
        }
        if(!this.proInfo.presentation){
          Toast('请填写拍品描述');
          return;
        }
        if(!this.imgList.length>0){
          Toast('请上传图片');
          return;
        }
        if(this.showPrice&&!this.showTime){
          this.proInfo.startTime = Moment().format('YYYY-MM-DD hh:mm:ss');
          this.proInfo.endTime = Moment().add(3650,'days').format('YYYY-MM-DD hh:mm:ss');
        }else {
          if(!this.proInfo.startTime){
            Toast('请选择拍品开拍时间');
            return;
          }
          if(!this.proInfo.endTime){
            Toast('请选择拍品结拍时间');
            return;
          }
          let now = new Date().getTime();
          let start = new Date(this.proInfo.startTime).getTime();
          let end = new Date(this.proInfo.endTime).getTime();
          if(end<now||end<start){
            Toast('结拍时间需大于开拍时间和当前时间');
            return;
          }
          this.proInfo.startTime = Moment(this.proInfo.startTime).format('YYYY-MM-DD hh:mm:ss');
          this.proInfo.endTime = Moment(this.proInfo.endTime).format('YYYY-MM-DD hh:mm:ss');
        }

        if(this.proInfo.dynastyId==0){
          Toast('请选择朝代');
          return;
        }
        if(this.proInfo.type==1&&!this.proInfo.fixedPrice){
          Toast('选择输入拍品价格');
          return;
        }
        if(this.proInfo.type==2&&!this.proInfo.startingPrice){
          Toast('选择输入拍品起拍价');
          return;
        }
        if(!this.proInfo.postage){
          this.proInfo.postage = 0;
        }
        this.proInfo.smImageUrl = this.imgList[0].smImageUrl;
        this.proInfo.mxImageUrl = this.imgList[0].mxImageUrl;

        let proMediaList=[];
        for(let i=0;i<this.imgList.length;i++){
          proMediaList[i] = {mediaUrl:this.imgList[i].sourceUrl,mediaType:this.imgList[i].type};
        }
        this.proInfo.proMediaList = proMediaList;

        //发布拍品
        publishProduct(this.proInfo).then(res => {
          if(res.data.reqResult.code>0){
            for(let v in this.proInfo){
              if(v=='type'||v=='categoryId'||v=='unit'||v=='cashDeposit'||v=='assortCount'){
                continue ;
              }else if(v=='proMediaList'){
                this.proInfo[v] = [];
              }else if(v=='dynastyId'){
                this.proInfo[v] = 0;
              }else {
                this.proInfo[v] = '';
              }
            }
            this.imgList=[];
            Toast('发布成功');
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },

      //上传图片
      // upFile(event) {
      //   let files = event.target.files;
      //   //上传图片
      //   let formdata = new FormData();
      //   formdata.append('type',this.urlType);
      //   for(let i=0;i<files.length;i++){
      //     formdata.append('files',files[i]);
      //   }
      //   uploadImage(formdata).then(res => {
      //     if(res.data.reqResult.code > 0){
      //       let data = res.data.data;
      //       for(let i=0;i<data.length;i++){
      //         this.imgList.push(data[i]);
      //       }
      //     }else {
      //       Toast(res.data.reqResult.msg);
      //     }
      //   })
      // },
      //上传图片
      upFile(event) {
        let files = event.target.files;
        let formdata = new FormData();
        formdata.append('type',this.urlType);
        formdata.append('needSmImg',1);
        for(let i=0;i<files.length;i++){
          formdata.append('files',files[i]);
        }
        uploadMedia(formdata).then(res => {
          if(res.data.reqResult.code > 0){
            console.log(res);
            let data = res.data.data;
            for(let i=0;i<data.length;i++){
              this.imgList.push(data[i]);
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },

      //删除图片
      removeImg(index){
        this.imgList.splice(index,1);
      },
      //切换价格方式
      togglePrice(i){
        this.isPriceIndex=i;
        this.proInfo.type = i;
        for(let v in this.proInfo){
          if(v=='name'||v=='presentation'||v=='proMediaList'||v=='type'||v=='categoryId'||v=='unit'||v=='cashDeposit'||v=='assortCount'){
            continue ;
          }else if(v=='dynastyId'){
            this.proInfo[v] = 0;
          }else {
            this.proInfo[v] = '';
          }
        }
        if(this.isPriceIndex==1){
          this.showPrice = true;
          this.showTime = true;
        }else {
          this.showPrice = false;
        }
      },
      //切换时间限制
      check(i){
        this.isCheckedIndex = i;
        if(this.isCheckedIndex==1){
          this.showTime=true;
        }else if(this.isCheckedIndex==0){
          this.showTime=false;
        }
      },

      showAction(){
        this.isAction = true;
      },
      cancel(){
        this.isAction = false;
      },
    }
  }
</script>

<style scoped>
  .publish-lot-nav{
    display: flex;
    border: 1px solid #C50000;
    border-radius: 4px;
  }
  .publish-lot-nav li{
    width: 50%;
    text-align: center;
    font-size: 0.65rem;
    color: #C50000;
  }
  .publish-lot-nav li.active{
    background-color: #C50000;
    color: #ffffff;
  }
  .explain{
    display: flex;
    align-items: center;
    background: rgba(197,0,0,0.03);
    font-size: 0.6rem;
    color: #686463;
    padding: 0.35rem 0 0.35rem 0.35rem;
  }
  .explain img{
    width: 0.65rem;
    margin-right: 4px;
  }
  .miaoshu{
    align-self:flex-start;
  }
  /*上传图片*/
  .weui-uploader__file{
    width: 3.9rem;
    height: 3.9rem;
  }
  .uploader__input-box{
    position: relative;
    float: left;
    width: 3.9rem;
    margin-right: 9px;
    margin-bottom: 9px;
  }
  .uploader__input-box img{
    width: 100%;
  }
  /*有无时间限制选项按钮*/
  .weui-cells_checkbox,.weui-check__label{
    display: flex;
  }
  .weui-check__label:first-child{
    margin-right: 0.75rem;
  }
  .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    content: '';
    border: 1px solid #c50000;
    background-color: #c50000;
  }
  .weui-cells_checkbox .weui-icon-checked:before {
    content: '';
    border: 1px solid #999999;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .weui-cells_checkbox .weui-cell__hd{
    display: flex;
    align-items: center;
  }
  .weui-check__label p{
    color: #999999;
  }
  .btn-box{
    margin-top: 0.85rem;
  }

  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .weui-actionsheet{
    background: #EBEBEC;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  .weui-actionsheet__menu{
    background-color: #ffffff;
  }
  .weui-actionsheet__cell{
    padding: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.85rem;
    color: #1A1A1A;
  }
  .weui-actionsheet__cell:before{
    border-top: 1px solid #C8C8C9;
  }
  .weui-actionsheet__action{
    margin-top: 0.25rem;
    background-color: #ffffff;
  }
  .select-one{
    color: #cccccc;
  }
  .select-one option{
    color: #000000;
  }
</style>
